<!--
 * @Author: Wushiqi
 * @Descripttion: 视频列表
 * @Date: 2020-07-26 22:41:18
 * @LastEditors: Wushiqi
 * @LastEditTime: 2020-10-22 22:20:06
-->
<template>
  <div v-if="category" class="home">
    <nav-bar />
    <div class="category-tab">
      <div class="category-ico" @click="$router.push('/editcategory')"><van-icon name="setting-o" /></div>
      <van-tabs v-model="active" swipeable sticky>
        <van-tab v-for="(item, key) in category" :key="key" :title="item.title">
          <!-- 内容 {{ item.title }} -->
          <van-list
              v-model="item.loading"
              :finished="item.finished"
              :immediate-check="false"
              finished-text="我也是有底线的"
              @load="onLoad"
            >
            <div class="detail-parent">
              <cover v-for="(categoryItem, categoryIndex) in item.list" :key="categoryIndex" class="detail-item" :detailItem="categoryItem" />
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    
  </div>
</template>

<script>
import NavBar from '@/components/common/Navbar'
import Cover from '@/views/Cover'
export default {
  components: {
    NavBar,
    Cover
  },
  data() {
    return {
      category: [],
      active: 0
    }
  },
  watch: {
    active() {
      this.selectArtical()
    }
  },
  created() {
    this.selectCategory()
  },
  activated() {
    if (localStorage.getItem('newCat')) {
      let newCat = JSON.parse(localStorage.getItem('newCat'))
      this.changeCategory(newCat)
      this.selectArtical()
    }
  },
  methods: {
    // 获取导航数据
    async selectCategory() {
      if (localStorage.getItem('newCat')) {
        return
      }
      const res = await this.$http.get('/category')
      // console.log(res);
      // this.category = res.data
      this.changeCategory(res.data)
      this.selectArtical()
    },
    // 改造数据
    changeCategory(data) {
      const category1 = data.map((item, index) =>{
        item.list = []
        item.page = 0
        item.pagesize = 10
        item.loading = false
        item.finished = false
        return item
      })
      // console.log(category1);
      this.category = category1
    },
    // 获取文章数据
    async selectArtical() {
      const categoryItem = this.categoryItem()
      const res = await this.$http.get('/detail/' + categoryItem._id, {
        params: {
          page: categoryItem.page,
          pagesize: categoryItem.pagesize
        }
      })
      categoryItem.list.push(...res.data)
      categoryItem.loading = false
      if (res.data.length < categoryItem.pagesize) {
        categoryItem.finished = true
      }
    },
    categoryItem() {
      const categoryItem = this.category[this.active]
      return categoryItem
    },
    // 下拉加载更多
    onLoad() {
      // console.log('下拉加载更多');
      const categoryItem = this.categoryItem()
      setTimeout(() => {
        categoryItem.page += 1
        this.selectArtical()
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-color: white;
}
.detail-parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .detail-item {
    margin: 1.389vw 0;
    width: 45%;
  }
}
.category-tab {
  position: relative;
  .category-ico {
    position: absolute;
    right: 0;
    z-index: 5;
    top: 1.944vw;
    padding: 1.389vw 2.778vw;
    background: white;
  }
}
</style>